<script setup>
    import { ref,onMounted } from 'vue'
    import axios from 'axios'

    import OrderDetail from "@/components/OrderDetail.vue";

    const orderStatus = ref({
        '0': '全部订单', '1': '待付款','2': '待发货', '3': '待收货',
        '4': '待评价', '5': '退款中','6': '售后中', '7': '已取消',
        '8': '已退货', '9': '已收货'
    })

    const  orders =  ref([]) //要显示的订单列表

    const handleClick = (tab)=> {
        console.log(tab.name);  //就是不同的状态0-9
        //查询不同的状态
        loadOrdersByStatus(tab.props.name);
    }

    //加载指定状态的订单
    const loadOrdersByStatus = (status)=>{
        axios.get(`/order/loadOrdersByStatus?status=${status}`).then(resp => {
            orders.value = resp.data;
        })
    }

    onMounted(()=>{
        //加载全部订单
        loadOrdersByStatus('0');
    })
</script>

<template>
    <div>
        <el-card>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <!--  显示所有订单的状态 -->
                <el-tab-pane :label="value" :name="key"
                             v-for="(value,key,index) in orderStatus" :key="index">
                    <!-- 显示订单明细组件 -->
                    <order-detail :orders="orders"/>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<style scoped>

</style>